import React from "react"
import { View, Image, StatusBar, StyleSheet} from "react-native"
import { Label, Touch } from "./Component"
import { Jx, Color, Lt, Jpp } from "./Jx";
import { Navigator } from "./Navigator";

const statusHeight = Jpp.isIphoneX ? 44 : 20;
// 状态栏（安卓 IOS 颜色 沉浸式 刘海屏）
function renderStatus(props, cond){
    if(props.hidden){
        return <StatusBar {...props} />;
    }
    let barStyle = cond.isTheme ? 'light-content' : 'dark-content';
    let backgroundColor = props.backgroundColor || (cond.isTheme ? Color.theme : Color.back);
    if(Jpp.isAndroid || cond.isForNav || props.translucent){
        if(props.translucent){
            backgroundColor = Color.transparent;
        }
        props = {barStyle, backgroundColor, ...props};
        return <StatusBar {...props}/>;
    }
    // let backgroundColor = cond.isTheme ? Color.theme : Color.back;
    props = {barStyle, backgroundColor, ...props}
    return <View style={{height:statusHeight, backgroundColor}}>
        <StatusBar {...props}/>
    </View>;
}
const isTheme = 1, isTranslucent = 1, isForNav = 1;
export class _StatusBar extends React.PureComponent{
    render(){
        return renderStatus(this.props, {isForNav});
    }
}
export class StatusBarTheme extends React.PureComponent{
    render(){
        return renderStatus(this.props, {isForNav, isTheme});
    }
}
export class StateBar extends React.PureComponent{
    render(){
        return renderStatus(this.props, {});
    }
}
export class StateBarTheme extends React.PureComponent{
    render(){
        return renderStatus(this.props, {isTheme});
    }
}
export class StateTranslucent extends React.PureComponent{
    render(){
        return renderStatus(this.props, {isTranslucent});
    }
}
export class StateTranslucentTheme extends React.PureComponent{
    render(){
        return renderStatus(this.props, {isTheme, isTranslucent});
    }
}
const c_navHeight = Jpp.navHeight;
const styles = StyleSheet.create({
    header:{
        borderBottomWidth:0,
        elevation:0,
    },
    title : {
        fontSize:Lt.c20, 
        fontWeight:"normal"
    },
    labellr:{
        fontSize:Lt.c16,
    }
});
const styleNavCom = StyleSheet.create({
    back : {
        ...styles.header, 
        backgroundColor:Color.back
    },
    theme : {
        ...styles.header, 
        backgroundColor:Color.theme,
    },
    minHeight : {
        minHeight:c_navHeight, 
        height: c_navHeight,
    },
});
const styleNavIOS = StyleSheet.create({
    back : {
        ...styleNavCom.back,
    },
    theme : {
        ...styleNavCom.theme,
    },
});
const styleNavAndroid = StyleSheet.create({
    back : {
        ...styleNavCom.back,
        ...styleNavCom.minHeight,
    },
    theme : {
        ...styleNavCom.theme,
        ...styleNavCom.minHeight,
    }
});
const styleNav = StyleSheet.create({
    back : Jpp.isIOS ? styleNavIOS.back : styleNavAndroid.back,
    theme : Jpp.isIOS ? styleNavIOS.theme : styleNavAndroid.theme,
});
const styleTitle = StyleSheet.create({
    back : {
        ...styles.title,
        color:Color.inverseBack,
    },
    theme : {
        ...styles.title,
        color:Color.inverseTheme,
    }
});
const styleLR = StyleSheet.create({
    back : {
        ...styles.labellr,
        color:Color.inverseBack,
    },
    theme : {
        ...styles.labellr,
        color:Color.inverseTheme,
    }
});
const iconBackWhite = require("./_images/white.png");
const iconBackBlack = require("./_images/black.png");
const styleImages = StyleSheet.create({
    // c_navHeight
    android : {marginRight : 44,},
    ios : {marginLeft : Lt.margin, marginRight : 44,}
})
const styleImage = Jpp.isAndroid ? styleImages.android : styleImages.ios;
const NavOptionsTheme = Object.freeze({
    // title : "呵呵哒",
    // headerBackground : Color.theme,
    // headerTransparent : true, //沉浸式
    headerStyle:styleNav.theme, // 标题绝对居中,所以长度有可能重叠
    // headerTitleContainerStyle : {borderColor:Color.white, borderWidth : 1},
    // headerLeftContainerStyle : {borderColor:"blue", borderWidth : 1},
    // headerRightContainerStyle : {borderColor:"green", borderWidth : 1},
    // headerTitle:"默认主题",
    // headerLeft:<Label style = {{color:Color.white}}>标题左</Label>,
    // headerRight:<Label>标题右右右右</Label>,
    headerTitleStyle:styleTitle.theme, //  margin pad不行
    headerBackImage : <Image style = {styleImage} source = {iconBackWhite}/>,
    // headerBackTitleStyle : {color : "blue", },
    // 会根据跳转自动变化?
    // headerBackTitle : "返回2",
    // headerTruncatedBackTitle : "返回22", 
});
const NavOptions = Object.freeze({
    headerStyle:styleNav.back,
    headerTitleStyle:styleTitle.back,
    headerBackImage : <Image style = {styleImage} source = {iconBackBlack}/>,
})
// 导航栏按钮
function renderTouch(props, cond){
    let {style, title, children, ...other} = props;
    let {fontSize, color, fontWeight, ...style1} = (style || {});
    style = {minHeight:c_navHeight, ...style1};
    let child = Jx.toChildren(props);
    if(Jx.isString(child)){
        let style2
        if(cond.isTitle){
            style2 = cond.isTheme ? styleTitle.theme : styleTitle.back;
        }else{
            style2 = cond.isTheme ? styleLR.theme : styleLR.back;
        }
        if(fontSize){
            style2 = {...style2, fontSize};
        }
        if(fontWeight){
            style2 = {...style2, fontWeight};
        }
        if(color){
            style2 = {...style2, color};
        }
        children = <View style = {{paddingHorizontal:20, alignSelf:"stretch", justifyContent:"center", alignItems:"center"}}>
            <Label style = {style2}>{child}</Label>
        </View>;
        style = {flexDirection:"row", ...style};
    }
    return <Touch style={style} {...other}>{children}</Touch>
}
const isTitle = 1;
class NavTouch extends React.PureComponent{
    render(){
        return renderTouch(this.props, {});
    }
}
class NavTouchTitle extends React.PureComponent{
    render(){
        return renderTouch(this.props, {isTitle});
    }
}
class NavTouchTheme extends React.PureComponent{
    render(){
        return renderTouch(this.props, {isTheme});
    }
}
class NavTouchTitleTheme extends React.PureComponent{
    render(){
        return renderTouch(this.props, {isTitle, isTheme});
    }
}
function renderTouchBack(props, image){
    let {style, onPress, ...other} = props;
    style = {minHeight:c_navHeight, flexDirection:"row", alignItems:"stretch", ...style};
    if(!onPress){
        onPress = Navigator.pop.bind(Navigator);
    }
    return <Touch style = {style} onPress = {onPress} {...other}>
        <View style = {{flexDirection:"row", alignItems:"center"}}>
            {image}
        </View>
    </Touch>
}
class NavTouchBack extends React.PureComponent{
    render(){
        return renderTouchBack(this.props, NavOptions.headerBackImage);
    }
}
class NavTouchBackTheme extends React.PureComponent{
    render(){
        return renderTouchBack(this.props, NavOptionsTheme.headerBackImage);
    }
}


const tabBarOptions = Object.freeze({
    activeTintColor : Color.theme,
    inactiveTintColor : Color.c9,
    style:{
        borderTopWidth:0,
        height:60,
        paddingVertical:Lt.pad,
    },
})
const styleForDiy = {
    width:Jpp.width,
    flexDirection:"row",
}
export const Nav = Object.freeze({
    tabBarOptions,
    StatusBar:_StatusBar,
    StateBar,
    StateTranslucent,
    options : NavOptions,
    Touch : NavTouch,
    TouchTitle : NavTouchTitle,
    TouchBack:NavTouchBack,
    style : {...styleNavAndroid.back, ...styleForDiy},
});
export const NavTheme = Object.freeze({
    tabBarOptions,
    StatusBar:StatusBarTheme,
    StateBar : StateBarTheme,
    StateTranslucent : StateTranslucentTheme,
    options : NavOptionsTheme,
    Touch : NavTouchTheme,
    TouchTitle : NavTouchTitleTheme,
    TouchBack:NavTouchBackTheme,
    style : {...styleNavAndroid.theme, ...styleForDiy}
})